<!--

  内容区采购系统
  
-->
<template>
    <div class="contain">
       
        <el-row >
  
                   <el-button type="primary"
                    plain class="aa"
                     @click="ee"
                     >采购合同</el-button>
                   <el-button type="success" plain>采购发票</el-button>
                   <el-button type="info" plain>样品赠送</el-button>
                   <el-button type="warning" plain>物料损失</el-button>
                   <el-button type="danger" plain>费用报销</el-button>
</el-row>
<!-- <cube title='请购单' km='395' top='410' @handc="tt"/>
<cube title='采购订单' km='596' top='410' @handc="tt"/>
<cube title='采购入库' km='851' top='293' @handc="cc"/>
<cube title='采购退货' km='851' top='532' @handc="tt"/>
<cube title='应付账款' km='1092' top='410' @handc="cc"/> -->
<div class="tu">
            <img   class="t1" src="../../assets/green/four-gray.png" />
            <img class="t2" src="../../assets/green/14.png" />
            <img class="t3" src="../../assets/green/four-black.png" />
            <img class="t2 t22" src="../../assets/green/14.png" />
            <img class="t4" src="../../assets/green/11.png" />
            <img class="t5 " src="../../assets/green/four-black.png" />
            <img class="t6" src="../../assets/green/four-gray.png" />
              <img class="t7" src="../../assets/green/10.png" />
            <img class="t8" src="../../assets/green/9.png" />
             <img class="t5 t55" src="../../assets/green/four-green.png" />

        <Fontsize title="请购单" distance="17%" km="44%"/>
    <Fontsize title="采购订单" distance="37.8%" km="44%"/>
    <Fontsize title="采购入库" distance="61.5%" km="22.5%"/>
    <Fontsize title="采购退货" distance="61.5%" km="67%"/>
    <Fontsize title="应付账款" distance="84%" km="44%"/>
    </div>
    <div class="biaoti-1">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget<br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum<br>
                sicuusnatoque&nbsp;penatibus&nbsp;et<br>
            </span>
       </div>
       <div class="biaoti-2">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget <br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum <br>
                sicuusnatoque&nbsp;penatibus&nbsp;et <br>
            </span>
       </div>
       <div class="biaoti-3">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget<br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum<br>
                sicuusnatoque&nbsp;penatibus&nbsp;et<br>
            </span>
       </div>
      
       <!-- css3线条-横 -->
       <!-- <span class="arrow-up"></span>
       <span class="arrow-up arrow-down"></span> -->
       <!-- css3线条-竖-左-->
       <!-- <span class="arrow-up arrow-shu"></span>
       <span class="arrow-left"></span>
        <span class="arrow-left arrow-shang "></span>
        <span class="arrow-left arrow-little" ></span>
        <span class="arrow-left arrow-little-border" ></span> -->
         <!-- css3线条-竖-右 -->
         <!-- <span class="arrow-left butt" ></span>
          <span class="arrow-left arr" ></span>
          <span class="arrow-up  butt-up" ></span>
           <span class="arrow-left butt-shang "></span>
           <span class="arrow-left butt-sanjiao1"></span>
           <span class="arrow-up butt-down"></span>
           <span class="arrow-left butt-xia "></span>
           <span class="arrow-left butt-sanjiao2"></span> -->
    </div>
</template>

<script>
import Cube from '../Cube'
import Fontsize from '../Fontsize'
export default {
    methods:{
        ee(){
            // alert('ee')
        },
        tt(){
            alert('css')
        },
        cc(){
            alert('html')
        }
    },
    components:{
        Cube,
        Fontsize 
    }
}
</script>

<style lang="scss" scoped>
    .contain{
        height: 100%;
    }
    .aa{
        margin-left:60px
    }
  .el-button{
       margin-top: 20px;
    color: #b0b0b0;
    background: #5a5a5a;
    border-color: #5a5a5a;
        transition: 1.1s;
   }


.tu{
    position: relative;
    height: 88%;
    width: 68%;
    }
    .t1{
   position: absolute;
    top: 37%;
    left: 14%;
        height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }
    .t2{
   position: absolute;
    top: 47.5%;
    left: 30%;
    height: 1%;
    width: 3.18%;
    }
     .t3{
    position: absolute;
    top: 37%;
    left: 34.5%;
       height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }
    .t22{
       left: 50.5%;
    }
    .t4{
        position: absolute;
    top: 26%;
    left: 53.5%;
    height: 45.68%;
    width: 3.91%;
    }
    .t5{
        position: absolute;
    top: 15.5%;
    left: 58.5%;
        height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }
    .t6{
    position: absolute;
    top: 59.5%;
    left: 58.5%;
       height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }
    .t7{
     position: absolute;
        top: 25.5%;
    left: 73.5%;
    height: 23.48%;
    width: 6.72%;
    }
    .t8{
    position: absolute;
    top: 48.5%;
    left: 73.5%;
    height: 23.48%;
    width: 6.72%;
    }
    .t55{
     left: 80.65%;
    top: 37%;
        height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }

.biaoti-1{
    position: absolute;
   bottom:33%;
    left: 23%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
       margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}
.biaoti-2{
    position: absolute;
   bottom:33%;
    left: 35%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
       margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}
.biaoti-3{
    position: absolute;
   bottom:33%;
    left:61%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
      margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}


    @media screen and (max-width:1462px){
p{  font-size: 14px !important;};

}

    // 线条1
//     .arrow-up {
//     position: absolute;
//     top: 405px;
//     left: 543px;
//    }
//    .arrow-down{
//         left: 742px;
//    }
//  .arrow-up:before {
//     position: absolute;
//     content: '';
//     border: none;
//     background-color: #bcdf8f;
//     height: 37px;
//     width: 5px;
    
//     transform: rotate(90deg);
// }
// 线条2
// .arrow-shu{
//     left:785px;
//     transform: rotate(90deg);
// }
// .arrow-shu::before{
//    height: 234px;
//     left: 19px;
//     top: -97px;
// }
// .arrow-left:before, .arrow-left:after {
//     content: '';
//     border-style: solid;
//     position: absolute;
// }
// .arrow-left:after {
//    left: 763px;
//     top: 534px;
//     border-width: 7px 7px 7px 7px;
//     border-color: transparent #bcdf8f transparent transparent;
//     -webkit-transform: rotate(138deg);
//     transform: rotate(138deg);
//     border-radius: 28px;
// }
// .arrow-left:before {
//    border: none;
//     background-color: #bcdf8f;
//     height: 37px;
//     width: 6px;
//     top: 527px;
//     left: 784px;
//     -webkit-transform: rotate(90deg);
//     transform: rotate(90deg);
// }
// .arrow-shang:after {
//     top: 304px;
//     left: 763px;
//     transform: rotate(227deg);
// }
// .arrow-shang:before{
//     top: 289px;
//     left: 785px;
// }
// .arrow-little:after {
//    top: 292px;
//     left: 806px;
//     border-color: transparent transparent transparent #bcdf8f;
//     transform: rotate(0);
//     border-width: 14px 14px 14px 14px;
//     border-radius: 0;
// }
// .arrow-little-border:after{
//     top:531px;
//     left: 806px;
//     border-color: transparent transparent transparent #bcdf8f;
//     transform: rotate(0);
//     border-width: 14px 14px 14px 14px;
//     border-radius: 0;
// }

// 线条3
// .butt:before{
//     top: 285px;
//     left: 989px;
//     background: #c4c5c9;
// }
// .butt:after{
//     left: 1003px;
//     top: 300px;
//     transform: rotate(315deg);
//     /* background: #c4c5c9; */
//     border-color: transparent #c4c5c9 transparent transparent;
// }
// .arr:before{
//     top: 524px;
//     left: 989px;
//     background: #c4c5c9;
// }
// .arr:after{
//       left: 1003px;
//     top:532px;
//     transform: rotate(406deg);
//     /* background: #c4c5c9; */
//     border-color: transparent #c4c5c9 transparent transparent;
// }
// .butt-up{
//     left:900px;
//     transform: rotate(90deg);
// }
// .butt-up:before{
//     height: 107px;
//     left: 78px;
//     top: -167px;
//     background-color: #c4c5c9;
//     width: 6px;
// }
// .butt-shang:after {
//     top: 426px;
//     left: 1010px;
    
//     transform: rotate(227deg);
   
//     border-color: transparent #c4c5c9 transparent transparent;
// }
// .butt-shang:before{
//     top: 411px;
//     left: 1032px;
//     background-color: #c4c5c9;
// }
// .butt-sanjiao1:after{
//     top: 418px;
//     left: 1053px;
//     border-color: transparent transparent transparent #c4c5c9 ;
//     transform: rotate(0);
//     border-width: 10px 10px 10px 10px;
//     border-radius: 0;
// }
// .butt-down{
//     left:900px;
//     transform: rotate(90deg);
// }
// .butt-down:before{
//     height: 107px;
//     left: -48px;
//     top: -167px;
//     background-color: #c4c5c9;
//     width: 6px;
// }
// .butt-xia:after {
//     top: 404px;
//     left: 1010px;
//     transform: rotate(133deg);
//     border-color: transparent #c4c5c9 transparent transparent;
// }
// .butt-xia:before{
//     top: 396px;
//     left: 1032px;
//     background-color: #c4c5c9;
// }
// .butt-sanjiao2:after{
//     top: 406px;
//     left: 1053px;
//     border-color: transparent transparent transparent #c4c5c9 ;
//     transform: rotate(0);
//     border-width: 10px 10px 10px 10px;
//     border-radius: 0;
// }
</style>
